/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions, TextInput, ScrollView } from 'react-native';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PCustumTabBar } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';
import { Modal } from 'antd-mobile-rn';

import SplashScreen from 'react-native-splash-screen';
import HttpTrans from '../../library/func/system/basis/http/trans';


/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Power_Login extends PageBase {
	constructor(props){
		super(props);
		this.state = {
            data:[
                
            ],
            nullData:false,
            now:new Date().getTime() / 1000
        };
	}
	
	/************************************************************************************ Life */
	/**
	 * willMount
	 */
    componentWillMount(){
        
    }
    
	/**
	 * willMount
	 */
	componentDidMount(){
        Dialog.loading();
        // http请求
        Http.get({
            url:'page/record/list.php',
            success:(data) => {
                Dialog.hide();
                // console.log('dataaaaaaaaaaaaaaaaaaaaaa',data)
                if(data.length==0){
                    this.setState({
                        nullData:true
                    },()=>{
                    });
                    return;
                }
                // console.log('data.length',data.length)
                this.setState({
                    data:data
                })
            },
            pipe:Config.pipe.action.default
        })
	}
    
    // 时间戳转日期
    toTime(dateStamp){

        // 获取时间 
        let time = new Date(dateStamp*1000);
        let expire = new Date(dateStamp*1000+7200000);
        // 开始时间
        let SH = time.getHours();
        let SM = time.getMinutes();
        // 结束时间
        let EH = expire.getHours();
        let EM = expire.getMinutes();
        // 时间补0
        SH <10 && (SH = '0'+SH)
        SM <10 && (SM = '0'+SM)
        EH <10 && (EH = '0'+EH)
        EM <10 && (EM = '0'+EM)

        // console.log('dateStamp::::::',dateStamp)
        console.log('time::::::',time)
        // console.log('expire::::::',expire)
        // console.log('SH::::::',SH)
        // console.log('SM::::::',SM)
        // console.log('EH::::::',EH)
        // console.log('EM::::::',EM)
        // 返回时间  格式 08:00
        let Sdate = SH + ':' + SM + '-' + EH + ':' + EM;
        return Sdate;
    }

	
	
	/************************************************************************************ Render */
	render() {
		return (
			<CPage>
				<CScroll bg='#efeff4' mt='96' py='20'>

                    {
                        this.state.nullData &&
                        <CHand mt='300' x='center'>
                            <CText size='36' color='#ccc'>还没有预约历史纪录哦~</CText>
                        </CHand>
                    }

                    {
                        this.state.data.length != 0 && this.state.data.map( (item,index) => {
                            return(
                                item.status == 0 && item.time+7200 < this.state.now ?
                                <CColumn bg='#fff' mb='20' py='15' rel oh key={item.id}>
                                    <CRow px='40' py='10'>
                                        <CText size='30' color='#bbb'>{item.position_name}</CText>
                                    </CRow>
                                    <CRow px='40' py='10' bb='1 #efeff4' mb='5'>
                                        <CHand f='1' y='center'>
                                            <CIcon w='28' h='28' mr='10' color='#bbb' icon={ Design.icon["gopasstime"] }></CIcon>
                                            <CText size='26' color='#bbb'>{this.toTime(item.time)}</CText>
                                        </CHand>
                                        <CHand f='1' y='center'>
                                            <CIcon w='30' h='30' mr='10' color='#bbb' icon={ Design.icon["location"] }></CIcon>
                                            <CText size='26' color='#bbb'>{item.position_addr}</CText>
                                        </CHand>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#bbb'>大号</CText>
                                            <CText size='24' ml='10' color='#bbb'>*{item.big}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_big.map( big => {
                                                        return(
                                                            big.status == 0 ?
                                                            <CText ba='1 #91a699' color='#91a699' mr='15' px='10' py='5' size='22' ra='3' key={big.id}>{big.group_name+'柜'+big.kuang_name+'号'}</CText>
                                                            :
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={big.id}>{big.group_name+'柜'+big.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#bbb'>中号</CText>
                                            <CText size='24' ml='10' color='#bbb'>*{item.middle}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_middle.map( middle => {
                                                        return(
                                                            middle.status == 0 ?
                                                            <CText ba='1 #91a699' color='#91a699' mr='15' px='10' py='5' size='22' ra='3' key={middle.id}>{middle.group_name+'柜'+middle.kuang_name+'号'}</CText>
                                                            :
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={middle.id}>{middle.group_name+'柜'+middle.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#bbb'>小号</CText>
                                            <CText size='24' ml='10' color='#bbb'>*{item.small}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_small.map( small => {
                                                        return(
                                                            small.status == 0 ?
                                                            <CText ba='1 #91a699' color='#91a699' mr='15' px='10' py='5' size='22' ra='3' key={small.id}>{small.group_name+'柜'+small.kuang_name+'号'}</CText>
                                                            :
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={small.id}>{small.group_name+'柜'+small.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CHand abs top='26' w='150' x='center' bg='#bbb' style={{transform:[{ rotate: '45deg' }],right:-18}}>
                                        <CText size='20' color='#fff'>已过期</CText>
                                    </CHand>
                                </CColumn>
                                : item.status == 0 ?
                                <CColumn bg='#fff' mb='20' py='15' rel oh key={item.id}>
                                    <CRow px='40' py='10'>
                                        <CText size='30' color='#333'>{item.position_name}</CText>
                                    </CRow>
                                    <CRow px='40' py='10' bb='1 #efeff4' mb='5'>
                                        <CHand f='1' y='center'>
                                            <CIcon w='28' h='28' mr='10' color='#707070' icon={ Design.icon["gopasstime"] }></CIcon>
                                            <CText size='26' color='#797979'>{this.toTime(item.time)}</CText>
                                        </CHand>
                                        <CHand f='1' y='center'>
                                            <CIcon w='30' h='30' mr='10' color='#707070' icon={ Design.icon["location"] }></CIcon>
                                            <CText size='26' color='#797979'>{item.position_addr}</CText>
                                        </CHand>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#333'>大号</CText>
                                            <CText size='24' ml='10' color='#333'>*{item.big}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_big.map( big => {
                                                        return(
                                                            big.status == 0 ?
                                                            <CText ba='1 #26c75e' color='#26c75e' mr='15' px='10' py='5' size='22' ra='3'>{big.group_name+'柜'+big.kuang_name+'号'}</CText>
                                                            :
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={big.id}>{big.group_name+'柜'+big.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#333'>中号</CText>
                                            <CText size='24' ml='10' color='#333'>*{item.middle}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_middle.map( middle => {
                                                        return(
                                                            middle.status == 0 ?
                                                            <CText ba='1 #26c75e' color='#26c75e' mr='15' px='10' py='5' size='22' ra='3'>{middle.group_name+'柜'+middle.kuang_name+'号'}</CText>
                                                            :
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={middle.id}>{middle.group_name+'柜'+middle.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#333'>小号</CText>
                                            <CText size='24' ml='10' color='#333'>*{item.small}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_small.map( small => {
                                                        return(
                                                            small.status == 0 ?
                                                            <CText ba='1 #26c75e' color='#26c75e' mr='15' px='10' py='5' size='22' ra='3'>{small.group_name+'柜'+small.kuang_name+'号'}</CText>
                                                            :
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={small.id}>{small.group_name+'柜'+small.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CHand abs top='26' w='150' x='center' bg='#26c75e' style={{transform:[{ rotate: '45deg' }],right:-18}}>
                                        <CText size='20' color='#fff'>待使用</CText>
                                    </CHand>
                                </CColumn>
                                :
                                <CColumn bg='#fff' mb='20' py='15' rel oh key={item.id}>
                                    <CRow px='40' py='10'>
                                        <CText size='30' color='#bbb'>{item.position_name}</CText>
                                    </CRow>
                                    <CRow px='40' py='10' bb='1 #efeff4' mb='5'>
                                        <CHand f='1' y='center'>
                                            <CIcon w='28' h='28' mr='10' color='#bbb' icon={ Design.icon["gopasstime"] }></CIcon>
                                            <CText size='26' color='#bbb'>{this.toTime(item.time)}</CText>
                                        </CHand>
                                        <CHand f='1' y='center'>
                                            <CIcon w='30' h='30' mr='10' color='#bbb' icon={ Design.icon["location"] }></CIcon>
                                            <CText size='26' color='#bbb'>{item.position_addr}</CText>
                                        </CHand>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#bbb'>大号</CText>
                                            <CText size='24' ml='10' color='#bbb'>*{item.big}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_big.map( big => {
                                                        return(
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={big.id}>{big.group_name+'柜'+big.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#bbb'>中号</CText>
                                            <CText size='24' ml='10' color='#bbb'>*{item.middle}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_middle.map( middle => {
                                                        return(
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={middle.id}>{middle.group_name+'柜'+middle.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CRow px='40' pt='10'>
                                        <CHand df w='90'>
                                            <CText size='24' color='#bbb'>小号</CText>
                                            <CText size='24' ml='10' color='#bbb'>*{item.small}</CText>
                                        </CHand>
                                        <CLine bg='#000' ml='55'>
                                            <ScrollView
                                                horizontal={true}
                                                showsHorizontalScrollIndicator={false}
                                                style={{flex:1,backgroundColor:'#fff'}}
                                            >
                                                {
                                                    item.item_small.map( small => {
                                                        return(
                                                            <CText ba='1 #bbb' color='#bbb' mr='15' px='10' py='5' size='22' ra='3' key={small.id}>{small.group_name+'柜'+small.kuang_name+'号'}</CText>
                                                        )
                                                    })
                                                }
                                            </ScrollView>
                                        </CLine>
                                    </CRow>
                                    <CHand abs top='26' w='150' x='center' bg='#bbb' style={{transform:[{ rotate: '45deg' }],right:-18}}>
                                        <CText size='20' color='#fff'>已使用</CText>
                                    </CHand>
                                </CColumn>
                            )
                        })
                    }

				</CScroll>

				{/* CHeader */}
                <CHeader h='96' y='center' bg='#fff'>
                    <CBetween px='20'>
						<CHand></CHand>
						<CItemX>
							<CHand mr='60' h='96' y='center'
							onPress={
								()=>{
									this.nav.navigate('CablistList')
								}
							}
							>
								<CText size='34'>预约</CText>
							</CHand>
							<CHand h='96'  bb='4 #26c75e' y='center'
							onPress={
								()=>{
									this.nav.navigate('Record')
								}
							}
							>
								<CText size='34'  mt='4' color="#26c75e">记录</CText>
							</CHand>
						</CItemX>
                        <CHand w='44' h='44'
							onPress={
								()=>{

									Modal.alert('退出登录', '确定注销登陆', [
										{ text: '取消', onPress: () => console.log('cancel'), style: 'cancel' },
										{ text: '确定', onPress: () => {
											this.nav.navigate('Power')
										} },
									]);
																	
								}
							}
						>
                            <CIcon w='50' h='50' color="#26c75e" icon={ Design.icon["gopass"] }></CIcon>
                        </CHand>
                    </CBetween>
                </CHeader>
			</CPage>
		);
	}
}
